.container {
  width: 100%;
  height: 100%;
  padding: 16px 20px;

  .slider {
    width: 100%;

    .labels {
      display: flex;
      justify-content: space-between;

      .min {
        text-align: left;
      }

      .max {
        text-align: right;
      }
    }

    .label {
      font-weight: 500;
      font-size: 12px;
      line-height: 20px;
    }

    .value {
      display: flex;
      align-items: baseline;
      font-weight: 500;
      font-size: 14px;
      line-height: 22px;

      .unit {
        margin-left: 4px;
        color: rgba(255, 255, 255, 0.6);
        font-size: 12px;
        line-height: 20px;
      }
    }

    .bar {
      position: relative;
      width: 100%;
      height: 24px;
      background: rgba(255, 255, 255, 0.2);

      .barPer {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        transition: width 1s;

        .handle {
          position: absolute;
          top: -2px;
          right: -3px;
          width: 6px;
          height: 28px;
          background: #fff;
          border-radius: 3px;
          box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.3);
        }

        .per {
          position: absolute;
          top: 2px;
          right: 11px;
          color: #fff;
          font-size: 14px;
          line-height: 24px;

          &.r {
            left: 11px;
          }
        }
      }
    }
  }

  .slider + .slider {
    margin-top: 16px;
  }
}
